<template>
	<view class="audio-page">
		<view class="audio-warp">
			<view class="cover-warp">
				<image :src="poster" v-if="poster" class="cover-img"></image>
			</view>
			<view class="audio-con">
				<view class="info">
					<text class="audio-name am-text-eill">{{ fileName }}</text>
					<text class="audio-size" v-if="fileSize">{{ fileSize }}KB</text>
				</view>
				<text class="audio-time">{{ fmtSecond(currentTime) }}</text>
			</view>
		</view>
		<view class="audio-btns">
			<button class="btn" @click="playAudio()">播放</button>
			<button class="btn" @click="pauseAudio()">暂停</button>
		</view>
	</view>
</template>

<script>
	import { notice, file } from '@/utils/common.js'
	
	/**
	 * 将秒转换为 分:秒
	 * @param {Number} s - 秒数
	 */
	function sToHs(s) {
		//计算分钟：将秒数除以60，然后下舍入，既得到分钟数
		let h;
		h = Math.floor(s / 60);
		//计算秒：取得秒%60的余数，既得到秒数
		s = s % 60;
		//将变量转换为字符串
		h += '';
		s += '';
		//如果只有一位数，前面增加一个0
		h = (h.length === 1) ? '0' + h : h;
		s = (s.length === 1) ? '0' + s : s;
		return h + ':' + s;
	}
	
	export default {
		data() {
			return {
				fileSrc: "",
				fileName: "",
				fileSize: "",
				poster: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png",
				audioCtx: null,
				currentTime: 0,
			}
		},
		onLoad(params) {
			if(params.filePath) {
				this.fileSrc = params.filePath
			} else if(params.fileId) {
				this.fileSrc = file.downFileUrl(params.fileId)
			} else {
				notice.toast('音频参数错误')
				return
			}
			this.fileName = params.fileName
			this.fileSize = params.fileSize
			this.audioCtx = uni.createInnerAudioContext()
			this.audioCtx.src = this.fileSrc
			this.audioCtx.startTime = 0
			this.bindAuidoCallback(this.audioCtx)
		},
		methods: {
			bindAuidoCallback(ctx) {
				ctx.onTimeUpdate((e) => {
					this.onTimeUpdate(e)
				})
				ctx.onError((e) => {
					this.onError(e)
				})
			},
			playAudio() {
				this.audioCtx.play()
			},
			pauseAudio() {
				this.audioCtx.pause()
			},
			onTimeUpdate(e) {
				this.currentTime = Math.floor(this.audioCtx.currentTime)
			},
			onError(e) {
				notice.toast("音频加载失败")
				throw new Error(e.errMsg, e.errCode)
			},
			fmtSecond(sec) {
				return sToHs(sec)
			}
		},
		beforeDestroy() {
			this.audioCtx.pause()
			this.audioCtx.destroy()
		}
	}
</script>

<style lang="scss">
	.audio-page {
		padding: 20px;
	}
	
	.audio-warp {
		display: flex;
		overflow: hidden;
		height: 70px;
		border-radius: 3px;
		border: 1px solid #e0e0e0;
	}
	
	.cover-warp {
		position: relative;
		flex-shrink: 0;
		width: 60px;
		height: 60px;
		margin: 5px;
		
		.cover-img {
			width: 100%;
			height: 100%;
		}
	}
	
	.audio-con {
		position: relative;
		flex: 1;
		display: flex;
		width: 0;
		padding: 0 15px;
		align-items: center;
		background-color: #fcfcfc;
		
		.info {
			width: 90%;
		}
		
		.audio-name {
			display: block;
			font-size: 18px;
			color: #353535;
		}
		
		.audio-size {
			display: block;
			font-size: 16px;
			color: #888888;
		}
		
		.audio-time {
			font-size: 16px;
			color: #9d9d9d;
		}
	}
	
	.am-text-eill {
		/*超出省略号*/
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.audio-btns {
		display: flex;
		padding: 20px 0;
		
		button {
			flex-grow: 1;
			background-color: #1E91E6;
			margin: 0 8px;
			font-size: 16px;
			color: #fff;
		}
		
		button:nth-child(1) {
			margin-left: 0;
		}
		
		button:nth-child(2) {
			margin-right: 0;
		}
	}
	
</style>